
<template>
  <a-card hoverable>
    <template #title>
      {{ title }}
    </template>

    <template v-if="props.editable" #extra>
      <icon-edit class="icon" @click="emit('editQuestion' , props.id , props.index)" :size="iconSize"/>
      <icon-delete class="icon" @click="emit('deleteQuestion' , props.id , props.index)" style="color: red" :size="iconSize"/>
    </template>
    <!-- 定义了一个题目中的每一个选项-->
    <a-radio-group direction="vertical" :default-value="props.defaultValue" :disabled="props.disabled">
      <a-radio
          class="option"
          v-for="option in props.options"
          :value="option.key"
          :key="option.key"
          @click="emit('clickOption' , props.id , option.key)"
      >
        {{ option.key }}.{{ option.value }}
      </a-radio>
    </a-radio-group>
  </a-card>
</template>

<script setup>
import {defineProps, defineEmits, ref} from "vue";
import {IconDelete, IconEdit} from "@arco-design/web-vue/es/icon";

const props = defineProps(['id' , 'title' , 'options' , 'defaultValue','disabled','editable','index']);
const emit = defineEmits(['clickOption' , 'editQuestion' , 'deleteQuestion'])
const iconSize = ref(24)
</script>

<style scoped>
.icon {
  border-radius: 50%;
  transition: all 0.1s;
  margin-left: 20px;
  cursor: pointer;
}
</style>